<template>
	<view class="juhe">
		<view class="square" v-for="(item,index) in ButtonBanner" @click="clickBanner(index)">
			<view class="iiimg">
				<image :src="baseUrl+item.imgUrl"  mode=""></image>
			</view>
			<view class="text">{{ButtonBanner[index].name}}</view>
		</view>
	</view>
</template>

<script>
	import {
		is,
		getUrl
	} from '@/config.js';
	import {
		getBannerList
	} from "@/api/api.js";
	
	export default{
		data(){
			return{
				ButtonBanner:[],
				baseUrl: "",
			}
		},
		
		mounted() {
			var me = this;
			this.baseUrl = getUrl();
			getBannerList({
				bannerType: 1
			}).then(
				(res) => {
					me.ButtonBanner = res.rows;
				}
			);
		},
		methods:{
			//点击每一块跳转到对应类型的页面中
			clickBanner(index) {
				var banner = this.ButtonBanner[index];
				if (banner.contentType == 0) {
					uni.navigateTo({
						url: "/pages/index/publicArticle/bannerImage?bannerInfo=" + encodeURIComponent(JSON.stringify(banner))
					});
				}
				if (banner.contentType == 1) {
					uni.navigateTo({
						url: "/pages/index/publicArticle/bannerVideo?bannerInfo=" + encodeURIComponent(JSON
							.stringify(banner))
					});
				}
				if (banner.contentType == 2) {
					uni.navigateTo({
						url: "/pages/index/publicArticle/bannerArticle?bannerInfo=" + encodeURIComponent(JSON
							.stringify(banner))
					});
				}
				if (banner.contentType == 3) {
					uni.navigateTo({
						url: "/pages/index/publicArticle/bannerArticleUrl?bannerInfo=" + encodeURIComponent(JSON.stringify(banner))
					});
				}
				if (banner.contentType == 4) {
					var routerInfo = banner.sysBannerItemList[0].content;
					uni.navigateTo({
						url: routerInfo
					});
				}
			},
		}
	}
</script>

<style scoped>
	.juhe{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
	}
	.square{
		width: 640rpx;
		height: 340rpx;
		background-color: #ffffff;
		border-radius: 25rpx;
		margin-top: 32rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.2);
	}
	.iiimg{
		flex: 1;
	}
	.iiimg image{
		width: 100%;
		height: 100%;
		border-radius: 25rpx 25rpx 0 0;
	}
	.text{
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		margin-left: 38rpx;
	}
	
</style>
